<template>
	<view ref="objBox" style="touch-action: none">
		<view class="select-word-box" ref="letterBox">
			<!-- listA -->
			<view v-if="listA.length"
				style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content: space-between;">
				<view class="letter-item" style="flex: 1;"></view>
				<view v-for="(item, index) in listA" :key="item.key" class="letter-item"
					@click="fnSelectLetter(item,index)" :style="{width:letterWidth+'px'}">
					<view class="letter" :class="{'selected':item.status}">
						{{item.value}}
					</view>
				</view>
				<view class="letter-item" style="flex: 1;"></view>
			</view>

			<!-- listB -->
			<view v-if="listB.length"
				style="margin-top:10px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content: space-between;">
				<view class="letter-item" style="flex: 1;"></view>
				<view v-for="(item, index) in listB" :key="item.key" class="letter-item"
					@click="fnSelectLetter(item,index)" :style="{width:letterWidth+'px'}">
					<view class="letter" :class="{'selected':item.status}">
						{{item.value}}
					</view>
				</view>
				<view class="letter-item" style="flex: 1;"></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			word: {
				type: String,
				default: ''
			},
		}, // 声明接收来自父组件的prop
		data() {
			return {
				round: 1,
				letterWidth: 0,
				selectedLettersArr: [],
				listA: [],
				listB: [],
			}
		},
		watch: {
			word(newVal, oldVal) {
				this.round++;
				// this.fnInit()
			}
		},
		mounted() {
			let that = this;

			// 使用uni.createSelectorQuery()获取DOM元素的位置信息
			uni.createSelectorQuery().in(this).select('.select-word-box').boundingClientRect(data => {
				if (data) {
					that.letterWidth = data.width / 6;
					that.fnInit();
				}
			}).exec();
		},
		methods: {
			// 初使化
			fnInit() {
				console.log('初使化', this.word, this.word.length)

				for (var i = 0; i < this.word.length; i++) {
					if (this.word.length <= 6) {
						this.listA.push({
							key: '0' + i,
							value: this.word[i],
							status: false,
						});
					}
					if (this.word.length > 6 && this.word.length <= 7) {
						if (i <= 3) {
							this.listA.push({
								key: '0' + i,
								value: this.word[i],
								status: false,
							});
						} else {
							this.listB.push({
								key: '1' + i,
								value: this.word[i],
								status: false,
							});
						}
					}
				}

				console.log('listA', this.listA)
				console.log('listB', this.listB)
			},



			// 选择字母
			fnSelectLetter(item, index) {
				var letter = item.value;
				var position = item.key;

				console.log('position', position)

				if (item.status == false) {
					this.selectedLettersArr.push(item);

					if (this.selectedLettersArr.length == this.word.length) {
						if (this.selectedLettersArr.join('').toLocaleLowerCase() == 'apple') {
							uni.showToast({
								title: 'success',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: 'error',
								icon: 'none'
							})
						}
					}
				} else {
					var list = [];
					for (var i = 0; i < this.selectedLettersArr.length; i++) {
						if (this.selectedLettersArr[i].key != item.key) {
							list.push(this.selectedLettersArr[i]);
						}
					}
					this.selectedLettersArr = list;
				}

				item.status = !item.status;

				var arr = [];
				for (var i = 0; i < this.selectedLettersArr.length; i++) {
					arr.push(this.selectedLettersArr[i].value);
				}
				document.getElementById("selectedLetters").innerHTML = arr.join('');
			},
		}
	}
</script>

<style>
	.select-word-box {
		text-align: center;
	}

	.select-word-box .letter-item {
		text-align: center;
		background-color: red;
	}

	.select-word-box .letter {
		width: 50px;
		height: 50px;
		background-color: white;
		line-height: 50px;
		margin: 0 auto;
		font-size: 25px;
	}

	.select-word-box .selected {
		background-color: pink;
	}
</style>